<!-- 考勤统计-部门 -->
<template>
	<view>
		<!-- 第一行绿色 -->
		<view class="greenBox">
			<!-- 日期选择 -->
			<view class="mounthSelect">
				<!-- <picker fields="month" mode="date" :value="selectTime" @change="bindTimeChange">
					<view class="datePicker">
						<view class="uni-input">{{ selectTime }}</view>
						<uni-icons
							style="margin-left:30rpx"
							color="#fff"
							type="arrowdown"
							size="16"
						></uni-icons>
					</view>
				</picker> -->
				<picker  mode="date" :value="start_time" @change="bindTimeChangeStart">
					<view class="datePicker">
						<view class="uni-input">{{ start_time_show }}</view>
						<uni-icons
							style="margin-left:30rpx"
							color="#fff"
							type="arrowdown"
							size="16"
						></uni-icons>
					</view>
				</picker>
				<picker  mode="date" :value="end_time" @change="bindTimeChangeEnd">
					<view class="datePicker">
						<view class="uni-input">{{ end_time_show }}</view>
						<uni-icons
							style="margin-left:30rpx"
							color="#fff"
							type="arrowdown"
							size="16"
						></uni-icons>
					</view>
				</picker>
				<picker
					mode="selector"
					:range="classList"
					range-key="department_name"
					:value="reasons"
					@change="bindResonsChange"
				>
					<view v-if="!reasons" class="emptyReason">
						<text style="color: #fff;font-weight: normal;font-size: 28rpx;">
							请选择部门
						</text>
						<uni-icons
							style="margin-left:10rpx"
							color="#fff"
							type="arrowdown"
							size="16"
						></uni-icons>
					</view>
					<view v-else class="datePicker" style="color: #fff;font-weight: normal;">
						<text style="color: #fff;font-weight: normal;font-size: 28rpx">
							{{ reasons }}
						</text>
						<uni-icons
							style="margin-left:10rpx"
							color="#fff"
							type="arrowdown"
							size="16"
						></uni-icons>
					</view>
				</picker>
			</view>

			<view class="search_bar">
				<input
					class="search_bar_input"
					v-model="searchInfo"
					placeholder="请输入姓名"
					placeholder-class="search_input_text"
				/>
				<view class="sousuo_img_box" @click="handleSearch">
					<image src="../../../../static/client/sousuo.png" class="sousuo_img"></image>
				</view>
			</view>

			<!-- 部门选择-->
			<!-- 考勤状况 -->
			<!-- 	<view class="attendanceStatus">
				<view class="statusItem">
					<view style="font-size: 40rpx; font-weight: 700;">88</view>
					<view>出勤</view>
				</view>
				<view class="statusItem">
					<view style="font-size: 40rpx; font-weight: 700;">88</view>
					<view>迟到</view>
				</view>
				<view class="statusItem">
					<view style="font-size: 40rpx; font-weight: 700;">88</view>
					<view>早退</view>
				</view>
				<view class="statusItem">
					<view style="font-size: 40rpx; font-weight: 700;">88</view>
					<view>缺勤</view>
				</view>
				<view class="statusItem">
					<view style="font-size: 40rpx; font-weight: 700;">88</view>
					<view>出差</view>
				</view>
				<view class="statusItem">
					<view style="font-size: 40rpx; font-weight: 700;">88</view>
					<view>请假</view>
				</view>
			</view> -->
		</view>
		<!-- 部门考勤状况 -->
		<scroll-view scroll-y style="height: calc(100vh - 212rpx - 40px);" class="classStatus">
			<view
				class="classItem"
				v-for="item in tableData"
				:key="item.member_id"
				@click="goDetails(item)"
			>
				<view class="titleRow">
					<view class="title">{{ item.nickname }}</view>
					<uni-icons
						style="margin-left:30rpx"
						color="#999"
						type="arrowright"
						size="14"
					></uni-icons>
				</view>
				<div class="statusRow">
					<view class="statusItem">
						<view style="font-weight: 700;">{{ item.statistics.cq_count }}</view>
						<view>出勤</view>
					</view>
					<view class="statusItem">
						<view style="font-weight: 700;">{{ item.statistics.cd_count }}</view>
						<view>迟到</view>
					</view>
					<view class="statusItem">
						<view style="font-weight: 700;">{{ item.statistics.zt_count }}</view>
						<view>早退</view>
					</view>
					<view class="statusItem">
						<view style="font-weight: 700;">{{ item.statistics.kg_count }}</view>
						<view>旷工</view>
					</view>
					<view class="statusItem">
						<view style="font-weight: 700;">{{ item.statistics.bk_count }}</view>
						<view>缺卡</view>
					</view>
					<view class="statusItem">
						<view style="font-weight: 700;">{{ item.statistics.qj_count }}</view>
						<view>请假</view>
					</view>
				</div>
			</view>
			<!-- 加载更多 -->
			<view style="width: 100%;">
				<uni-load-more
					:status="status"
					iconType="auto"
					@clickLoadMore="getMore"
				></uni-load-more>
			</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			selectTime: new Date().toISOString().slice(0, 7),
			reasons: '',
			token: '',
			member_id: '',
			company_id: '',
			classList: [],
			classArr: [],
			classifyArr: [[], [], [], []],
			reasonsval: ['','','',''],
			tableData: [],
			searchClassId: '',
			searchInfo: '',
			total: 0,
			pageSize: 10,
			currentPage: 1,
			status: 'more',
			start_time: '',
			start_time_show: '开始日期',
			end_time: '',
			end_time_show: '结束日期',
			
		};
	},
	created() {
		this.token = uni.getStorageSync('btlh_process_token') || '';
		this.member_id = uni.getStorageSync('btlh_process_member_id') || '';
		this.company_id = uni.getStorageSync('bthl_process_LoginCompanyId') || '';
		this.status = 'more';
		this.currentPage = 1;
		this.tableData = [];
		this.getClassList();
		this.getList();
	},
	methods: {
		goDetails(item) {
			if (item.member_id) {
				uni.navigateTo({
					url: `/packageAdmin/pages/punchCard/attendanceStatistics?user_id=${
						item.member_id
					}`
				});
			}
		},
		getMore() {
			if (this.total > this.tableData.length) {
				this.status = 'loading';
				this.currentPage++;
				this.getList(); //执行的方法
				this.status = 'more';
			} else {
				//停止加载
				this.status = 'noMore';
			}
		},
		handleSearch() {
			this.currentPage = 1;
			this.tableData = [];
			this.status = 'more';
			this.getList();
		},
		// 获取考勤统计列表
		async getList() {
			// if(this.start_time=='开始日期'){
			// 	this.start_time=''
			// }
			// if(this.end_time=='结束日期'){
			// 	this.end_time=''
			// }
			const { data: res } = await this.$myRequest({
				url: 'ClockInStatistics/clockin_record_statistics',
				method: 'POST',
				data: {
					member_id: this.member_id,
					token: this.token,
					company_id: this.company_id,

					department_id: this.searchClassId,
					// month: this.selectTime,
					start_time:  this.start_time,
					end_time: this.end_time,
					nickname: this.searchInfo,
					p: this.currentPage,
					p_count: this.pageSize
				}
			});
			if (res.code != 200)
				return uni.showToast({
					title: res.datas.msg,
					icon: 'none'
				});
			this.tableData = [...this.tableData, ...res.datas.listInfo];
			this.total = parseInt(res.datas.count);
			console.log('获取的total', this.total);
			console.log('获取考勤统计列表', this.tableData);
		},
		bindTimeChange(val) {
			this.selectTime = val.detail.value;
			console.log(this.selectTime);
			this.currentPage = 1;
			this.tableData = [];
			this.status = 'more';
			this.getList();
		},
		bindTimeChangeStart(val) {
			this.start_time = val.detail.value;
			this.start_time_show = val.detail.value;
			console.log(this.start_time);
			this.currentPage = 1;
			this.tableData = [];
			this.status = 'more';
			this.getList();
		},
		bindTimeChangeEnd(val) {
			this.end_time = val.detail.value;
			this.end_time_show = val.detail.value;
			console.log(this.end_time);
			this.currentPage = 1;
			this.tableData = [];
			this.status = 'more';
			this.getList();
		},
		bindResonsChange(e) {
			console.log(e);
			// this.reasonsval= e.detail.value;
			this.reasons = this.classList[e.detail.value].department_name;
			// this.reasons = e.detail.value;
			this.searchClassId = this.classList[e.detail.value].department_id;
			console.log(this.searchClassId);
			this.currentPage = 1;
			this.tableData = [];
			this.status = 'more';
			this.getList();
		},
		// 获取部门列表
		async getClassList() {
			const { data: res } = await this.$myRequest({
				url: 'Management/department',
				method: 'POST',
				data: {
					member_id: this.member_id,
					token: this.token,
					company_id: this.company_id,
					p: 1,
					p_count: 10000
				}
			});
			if (res.code != 200)
				return uni.showToast({
					title: res.datas.msg,
					icon: 'none'
				});
				res.datas.listInfo.forEach(item=>{
					this.recursionclass(item)
				})
			// this.classList = res.datas.listInfo;
			// this.classList.forEach(item => {
			// 	this.recursionRes(item)
			// });
			// this.classList.unshift({
			// 	department_id: '',
			// 	department_name: '全部'
			// });
			// this.getAllClassify(this.classList);
			console.log('部门列表', this.classList);
		},
		recursionclass(item){
			if(!item.children){
				return this.classList.push(item)
			}else{
				this.classList.push(item)
				item.children.forEach(items=>{
					this.recursionclass(items)
				})
			}
		},
		recursionRes(item) {
			if (!item.children) {
				return;
			} else {
				item.children.unshift({
					department_id: '',
					department_name: '全部'
				});
				item.children.forEach(items=>{
					this.recursionRes(items);
				})
			}
		},
		getAllClassify() {
			this.classList.forEach((item, index) => {
				this.classifyArr[0].push(item);
			});
		}
	}
};
</script>

<style lang="scss">
.greenBox {
	background-color: #26bb7f;
	overflow: hidden;
	.mounthSelect {
		font-size: 30rpx;
		box-sizing: border-box;
		padding: 0 50rpx;
		text-align: center;
		color: #fff;
		font-weight: normal;
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.datePicker {
			display: flex;
			justify-content: center;
		}
	}
	// 考勤状况
	.attendanceStatus {
		display: flex;
		margin-bottom: 60rpx;
		justify-content: space-around;
		color: #fdbc76;
		font-size: 28rpx;
		.statusItem {
			display: flex;
			flex-direction: column;
			align-items: center;
		}
	}
}
.classStatus {
	margin-top: 10rpx;
	padding: 0 10rpx;
	box-sizing: border-box;
	.classItem::before {
		content: '';
		height: 100%;
		width: 10rpx;
		background-color: #fdbc76;
		position: absolute;
		top: 0;
		left: 0;
	}
	.classItem {
		position: relative;
		height: 170rpx;
		box-shadow: 0px 0px 9px 0px rgba(3, 70, 126, 0.14);
		margin-bottom: 10rpx;
		box-sizing: border-box;
		padding: 20rpx 30rpx;
		.titleRow {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 10rpx;
			color: #333;
			.title {
				font-size: 30rpx;
			}
		}
		.statusRow {
			display: flex;
			justify-content: space-around;
			color: #fdbc76;
			font-size: 28rpx;
			.statusItem {
				display: flex;
				flex-direction: column;
				align-items: center;
			}
		}
	}
}
.search_bar {
	background-color: #26bb7f;
	width: 100%;
	height: 92rpx;
	position: relative;
	// border-bottom: 20rpx solid #f7f7f7;
	margin-bottom: 20rpx;
	.search_bar_input {
		width: 660rpx;
		height: 72rpx;
		background: #f7f7f7;
		border: 1rpx solid #f7f7f7;
		border-radius: 36px;

		position: absolute;
		top: 10rpx;
		left: 50rpx;
		font-size: 26rpx;
		box-sizing: border-box;
		padding-left: 20rpx;

		.search_input_text {
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #b2b2b2;
			line-height: 37px;
			margin-left: 0rpx;
		}
	}

	.search_left_img {
		width: 46rpx;
		height: 36rpx;
		padding: 28rpx 30rpx;
	}

	.search_left {
		width: 106rpx;
		height: 92rpx;
		background: #40a0f2;
	}
	.sousuo_img_box {
		width: 70rpx;
		height: 75rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 10rpx;
		left: 600rpx;
		z-index: 109;
	}
	.sousuo_img {
		width: 38rpx;
		height: 34rpx;
	}
}
</style>
